<template>
    <div class="dialoglistDiv">
        <div class="dialogsearchDiv">
            <el-select v-model="obj.req.state" placeholder="全部状态" class="search_select" clearable>
                <el-option v-for="(item,index) in globalData.stateTypeAry" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <el-input clearable placeholder="匹配操作员名称" v-model="obj.req.key" class="search_key" />
            <span class="btn search" @click="init">搜索</span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
            <div class="searchRight">
                <span class="btn add" @click="add">添加管委会操作员</span>
            </div>
        </div>
        <div class="table_box"><div class="table_" id="tb">
            <ul class="head">
                <li class="liflex">操作员名称</li>
                <li class="li1">登录名</li>
                <li class="limobile wcen">联系电话</li>
                <li class="mw200 wcen">最后登录时间</li>
                <li class="mw150 wcen">正常/停用</li>
                <li class="mw200">操作</li>
            </ul>
            <div class="body">
                <ul v-for="(x,i) in obj.ary" :key="i">
                    <li class="liflex">{{x.name}}</li>
                    <li class="li1">{{x.uname}}</li>
                    <li class="limobile wcen">{{x.mobile}}</li>
                    <li class="mw200 wcen">{{x.last_login_time}}</li>
                    <li class="mw150 wcen">
                        <el-switch v-model="x.state" size="small" :validate-event="false" @change="setstate(x)"
                            active-text="" inactive-text=""
                            active-value="1" inactive-value="0">
                        </el-switch>
                    </li>
                    <li class="mw200">
                        <el-button class="edit_btn mr10" type="success" @click.prevent="edit(x)">修改</el-button>
                        <DelConfirm class="" @yesClick="del(x)" />
                    </li>
                </ul>
            </div>
        </div>
        </div><Pager :value="obj.req" :init="init" />
        <el-dialog v-model="obj.drawer.design" :title="obj.drawer.designTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <Edit 
                :management_id="props.management_id" :manager_id="obj.drawer.manager_id" 
                @editComplete="init()" @close="obj.drawer.design=false"
            />
        </el-dialog>
    </div>
</template>

<script setup>
    import { reactive,getCurrentInstance, ref,computed, toRefs,provide } from 'vue'
    import Pager from '@/components/pager.vue'
    import DelConfirm from '@/components/del_confirm.vue'
    import Edit from "./staff_edit.vue"
    let { proxy } = getCurrentInstance()

    const props = defineProps({
        management_id:  { type: String },
    })

    let obj = reactive({
        drawer: {
            design: false,
            designTitle: "",
            manager_id:"",
        },
        ary:[],
        req:{
            management_id: props.management_id || 0,
            currentpage: 1,
            pagesize: 10,
            count: 0,
            key: "",
            state: ""
        }
    })

    let init = () => {
        proxy.$ajax({
            url: '/management/manageruser_list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

    let add = () => {
        obj.drawer.design = true
        obj.drawer.designTitle = "添加管委会操作员"
        obj.drawer.manager_id = "0";
    }
    let edit = x => {
        obj.drawer.design = true
        obj.drawer.designTitle = "修改管委会操作员"
        obj.drawer.manager_id = x.manager_id;
    }

    let setstate = x => {
        proxy.$ajax({
            url: '/management/manageruser_setstate',
            data: { id: x.manager_id, management_id: props.management_id },
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin("状态变更成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
    let del = x => {
        proxy.$ajax({
            url: '/management/manageruser_delete',
            data: { id: x.manager_id, management_id: props.management_id },
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                proxy.elMessageMixin("删除成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
</script>

<style scoped>
    ::-webkit-scrollbar { width:10px; background-color: #FFFFFF; }
    .listDiv { top:70px; }
    .search_select { width:100px!important; }
    #tb ul .li1 { width: 280px; }
</style>